﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0069)http://developer.yahoo.com/yui/examples/base/base-in-doc2_source.html -->
<HTML><HEAD><TITLE>YUI Library - Base - Base in a 950px YUI Grids page</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK 
href="base_files/reset.css" type=text/css rel=stylesheet><LINK 
href="base_files/fonts.css" type=text/css rel=stylesheet><LINK 
href="base_files/grids.css" type=text/css rel=stylesheet><LINK 
href="base_files/base.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.6000.16939" name=GENERATOR></HEAD>
<BODY>
<DIV class=yui-t5 id=doc2>
<DIV id=hd>
<H1>The YUI CSS Foundation</H1>
<H2>YUI Base with YUI Reset, YUI Fonts and YUI Grids</H2>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
facilisis.</P></DIV>
<DIV id=bd>
<DIV id=yui-main>
<DIV class=yui-b>
<H2>A Second Level Header</H2>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. </P>
<H3>Nesting a Grid</H3>
<DIV class=yui-g>
<DIV class="yui-u first">
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.</P></DIV>
<DIV class=yui-u>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
</P></DIV></DIV>
<H4>This is 4th level heading</H4>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </P>
<H5>This is 5th level heading</H5>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </P>
<H6>This is 6th level heading</H6>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </P>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat.</P>
<DIV>This is a <CODE>div</CODE> element. Lorem ipsum dolor sit amet, elit, sed 
diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
(End of <CODE>div</CODE>.)</DIV>
<BLOCKQUOTE>
  <P>This is a block quotation containing a <EM>single</EM> paragraph. Lorem 
  ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
  euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat.</P></BLOCKQUOTE>
<P>The following contains address information about the author, in an 
<CODE>address</CODE> element.</P>
<H2>Lists</H2>
<P>This is a paragraph before an <STRONG>unordered</STRONG> list 
(<CODE>ul</CODE>). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat.</P>
<UL>
  <LI>One. 
  <LI>Two. 
  <LI>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
  <LI>Four. This is the last item in this list. Let us terminate the list now 
  without making any more fuss about it. </LI></UL>
<P>This is a paragraph before a <STRONG>ordered</STRONG> list (<CODE>ol</CODE>). 
Note that the spacing between a paragraph and a list before or after that is 
hard to tune in a user style sheet. You can't guess which paragraphs are 
logically related to a list, e.g. as a "list header".</P>
<OL>
  <LI>One. 
  <LI>Two. 
  <LI>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
  <LI>Four 
  <LI>Five 
  <LI>Six 
  <LI>Seven 
  <LI>Eight 
  <LI>Nine 
  <LI>Ten </LI></OL>
<P>This is a paragraph before a <STRONG>definition</STRONG> list 
(<CODE>dl</CODE>). In principle, such a list should consist of <EM>terms</EM> 
and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
erat volutpat. </P>
<DL>
  <DT>Apple 
  <DD>is a fruit. 
  <DT>Banana 
  <DD>Is also a fruit. 
  <DT>Tomato 
  <DD>Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
  volutpat. </DD></DL>
<H2>Text-level markup</H2>
<UL>
  <LI><ABBR title="Cascading Style Sheets">CSS</ABBR> (an abbreviation; 
  <CODE>abbr</CODE> markup used) 
  <LI><ACRONYM title="radio detecting and ranging">radar</ACRONYM> (an acronym; 
  <CODE>acronym</CODE> markup used) 
  <LI><CITE>Origin of Species</CITE> (a book title; <CODE>cite</CODE> markup 
  used) 
  <LI><CODE>a[i] = b[i] + c[i);</CODE> (computer code; <CODE>code</CODE> markup 
  used) 
  <LI>an <DFN>octet</DFN> is an entity consisting of eight bits 
  (<CODE>dfn</CODE> markup used for the term being defined) 
  <LI>this is <EM>very</EM> simple (<CODE>em</CODE> markup used for emphasizing 
  a word) 
  <LI>type <KBD>yes</KBD> when prompted for an answer (<CODE>kbd</CODE> markup 
  used for text indicating keyboard input) 
  <LI><Q>Hello!</Q> (<CODE>q</CODE> markup used for quotation) 
  <LI>He said: <Q>She said <Q>Hello!</Q></Q> (a quotation inside a quotation) 
  <LI>you may get the message <SAMP>Core dumped</SAMP> at times 
  (<CODE>samp</CODE> markup used for sample output) 
  <LI><STRONG>this is highlighted text</STRONG> (<CODE>strong</CODE> markup 
  used) 
  <LI><TT>text in monospace font</TT> (<CODE>tt</CODE> markup used) 
  <LI>the command <CODE>cat</CODE> <VAR>filename</VAR> displays the file 
  specified by the <VAR>filename</VAR> (<CODE>var</CODE> markup used to indicate 
  a word as a variable). 
  <LI>In order to test how subscripts and superscripts (<CODE>sub</CODE> and 
  <CODE>sup</CODE> markup) work inside running text, we need some dummy text 
  around constructs like x<SUB>1</SUB> and H<SUB>2</SUB>O (where subscripts 
  occur). So here is some fill so that you will (hopefully) see whether and how 
  badly the subscripts and superscripts mess up vertical spacing between lines. 
  Now superscripts: M<SUP>lle</SUP>, 1<SUP>st</SUP>, and then some mathematical 
  notations: e<SUP>x</SUP>, sin<SUP>2</SUP> <I>x</I>, and some nested 
  superscripts (exponents) too: Lorem ipsum dolor sit amet, consectetuer 
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
  magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
  tation ullamcorper suscipit lobortis nisl ut aliquip ex ea euismod tincidunt 
  ut laoreet dolore magna aliquam erat volutpat. </LI></UL>
<P>Some of the elements tested above are typically displayed in a monospace 
font, often using the <EM>same</EM> presentation for all of them. This tests 
whether that is the case on your browser:</P>
<UL>
  <LI><CODE>This is sample text inside code markup</CODE> 
  <LI><KBD>This is sample text inside kbd markup</KBD> 
  <LI><SAMP>This is sample text inside samp markup</SAMP> 
  <LI><TT>This is sample text inside tt markup</TT> </LI></UL>
<H2>Links</H2>
<UL>
  <LI><A href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</A> 
  <LI><A href="http://yuiblog.com/">the YUI Blog</A> </LI></UL>
<H2>Tables</H2>
<P>The following table has a caption. The first row and the first column contain 
table header cells only; other cells are data cells.</P>
<TABLE 
summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
  <CAPTION>Caption: Sample table: Areas of the Nordic countries, in sq 
  km</CAPTION>
  <TBODY>
  <TR>
    <TH>Country</TH>
    <TH>Total area</TH>
    <TH>Land area</TH></TR>
  <TR>
    <TH>Denmark</TH>
    <TD>43,070</TD>
    <TD>42,370</TD></TR>
  <TR>
    <TH>Finland</TH>
    <TD>337,030</TD>
    <TD>305,470</TD></TR>
  <TR>
    <TH>Iceland</TH>
    <TD>103,000</TD>
    <TD>100,250</TD></TR>
  <TR>
    <TH>Norway</TH>
    <TD>324,220</TD>
    <TD>307,860</TD></TR>
  <TR>
    <TH>Sweden</TH>
    <TD>449,964</TD>
    <TD>410,928</TD></TR></TBODY></TABLE>
<H2>Forms</H2>
<FORM action=http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi>
<DIV><INPUT type=hidden value=42 name="hidden field"></DIV>
<DIV><LABEL for=f1>Single-line text input field: <INPUT id=f1 
value="Default text." name=text></LABEL></DIV>
<DIV><LABEL for=f2>Multi-line text input field (textarea):</LABEL></DIV>
<DIV><TEXTAREA id=f2 name=textarea rows=16>Default text.</TEXTAREA></DIV>
<P>The following two radio buttons are inside <CODE>fieldset</CODE> element with 
a <CODE>legend</CODE>:</P>
<FIELDSET><LEGEND>Legend</LEGEND>
<DIV><LABEL for=f3>Radio button 1</LABEL> <INPUT id=f3 type=radio value=1 
name=radio> </DIV>
<DIV><LABEL for=f4>Radio button 2 (initially checked)</LABEL> <INPUT id=f4 
type=radio CHECKED value=2 name=radio> </DIV></FIELDSET> 
<FIELDSET><LEGEND>Check those that apply</LEGEND>
<DIV><LABEL for=f5>Checkbox 1</LABEL> <INPUT id=f5 type=checkbox name=checkbox> 
</DIV>
<DIV><LABEL for=f6>Checkbox 2 (initially checked)</LABEL> <INPUT id=f6 
type=checkbox CHECKED name=checkbox2> </DIV></FIELDSET> 
<P><LABEL for=f10>A <CODE>select</CODE> element with <CODE>size="1"</CODE> 
(dropdown box):</LABEL> </P><SELECT id=f10 size=1 name=select1> 
  <OPTION>one</OPTION> <OPTION selected>two (default)</OPTION> 
  <OPTION>three</OPTION></SELECT> 
<P><LABEL for=f11>A <CODE>select</CODE> element with <CODE>size="3"</CODE> 
(listbox):</LABEL> </P><SELECT id=f11 size=3 name=select2> 
  <OPTION>one</OPTION> <OPTION selected>two (default)</OPTION> 
  <OPTION>three</OPTION></SELECT> 
<DIV><LABEL for=f99>Submit button:</LABEL> <INPUT id=f99 type=submit value="Just a test" name=submit> </DIV>
<DIV><LABEL for=f0>Reset button:</LABEL> <INPUT id=f0 type=reset value=Reset name=reset> </DIV></FORM>
<P>This next bit shows that PREformatted text is working.</P><PRE>				1
				 2
				  3
				   4
				    5
				</PRE>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat.</P></DIV></DIV>
<DIV class=yui-b>
<H2>Sidebar</H2>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. </P>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. </P></DIV></DIV>
<DIV id=ft>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
</P></DIV></DIV>
<SCRIPT src="base_files/rto1_78.js" type=text/javascript></SCRIPT>

<SCRIPT>var rt_page="792403854:FRTMA"; var
rt_ip="58.57.66.17";
if ("function" == typeof(rt_AddVar) ){ rt_AddVar("ys", escape("A85B9345")); rt_AddVar("cr", escape("TGgGFVmL1VM"));
rt_AddVar("sg", escape("/SIG=13cnqomh66mrq73542ff6j&b=4&d=uzpL_vlpYFTr.yuge4d0i2tFKRo-&s=dl&i=sGvbnS0qxjync1E0M4N9/1262222783/58.57.66.17/A85B9345")); rt_AddVar("yd", escape("139707197"));
}</SCRIPT>
<NOSCRIPT><IMG src=""></NOSCRIPT> <!-- SpaceID=792403854 loc=FSRVY noad -->
<SCRIPT language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['yFoIMkWTWUM-']='&U=12dd3f3kq%2fN%3dyFoIMkWTWUM-%2fC%3d-1%2fD%3dFSRVY%2fB%3d-1%2fV%3d0';
</SCRIPT>
<NOSCRIPT><IMG height=1 alt="" src="base_files/b.gif" width=1></NOSCRIPT>
<SCRIPT language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['xloIMkWTWUM-']='&U=13e5n9kq3%2fN%3dxloIMkWTWUM-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1';
</SCRIPT>
<NOSCRIPT><IMG height=1 alt="" src="base_files/b(1).gif" width=1></NOSCRIPT> <!-- VER-735 -->
<SCRIPT language=javascript>
if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=http://l.yimg.com/d/lib/bc/bc_2.0.4.js></scr"+"ipt>");
</SCRIPT>

<SCRIPT language=javascript>
if(window.yzq_p)yzq_p('P=so1G6EWTW6Brb0cZSCe801IBOjlCEUs7_b8ABttq&T=13tm120kv%2fX%3d1262222783%2fE%3d792403854%2fR%3ddev_net%2fK%3d5%2fV%3d1.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d2368652567%2fS%3d1%2fJ%3dA85B9345');
if(window.yzq_s)yzq_s();
</SCRIPT>
<NOSCRIPT><IMG height=1 alt="" src="base_files/b(2).gif" width=1></NOSCRIPT> <!-- p1.ydn.sp1.yahoo.com compressed/chunked Wed Dec 30 17:26:23 PST 2009 --></BODY></HTML>
